Utilizamos el responsive design para desarrollar paginas que respondan al tamaño del navegador, de manera que no se veran igual si se ven en la pantalla de un telefono movil o en un monitor de un ordenador
Para hacer que una web sea responsive podemos utilizar los siguientes elementos de CSS:
em y rem se usan como medidas de tamaño relativas.
En el caso de em es la medida relativa al tamaño de fuente base que usa el navegador, por lo general son 16 pixeles, en este caso 1em equivaldria a 16px y 2em equivaldria a 32px
En el caso de rem es exactamente lo mismo pero es en referencia al tamaño de fuente por defecto del elemento raiz <html>
Las medidas en porcentaje son otras de las herramientas para hacer una pagina web responsive, si indicamos por ejemplo que un elemento ocupe el 50% de un elemento cuando el navegador se haga mas grande o mas pequeño ese tamaño variara en funcion de su tamaño (en este caso a la mitad, el 50%)
Podemos utilizar las media tags para indicar si queremos añadir un estilo css a una pagina o no:
@media only screen and (max-width:960px){
.main{
margin-top: 0;
}
}
@media only screen and (max-width:700px){
.supporting img{
display:none;
}
}
@media only screen and (max-width:470px){
.rating h1{
font-size:2rem;
}
.gallery img {
width:100%;
margin:0;
}
footer nav{
display:none;
}
}En el ejemplo anterior tendriamos 3 situaciones, cuando la pagina tiene un ancho hasta 470px se aplicaria el ultimo css, cuando la pagina tiene un ancho hasta 700px se aplicaria el segundo y cuando tiene un ancho hasta 960px se aplicaria el tercero
Existen varias propiedades para las media tags, otra de las propiedades es la de orientation que se puede aplicar asi:
@media only screen and (orientation:portrait)Con la propiedad orientation podemos usar el valor portrait para que se aplique cuando el alto de la pagina sea mayor que el ancho, o podemos usar landscape para aplicar un estilo cuando el ancho de la pagina sea mayor que el alto
Web development | Responsive